<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        strong{
            display: inline-block;
            width: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in list" :key="item.id">
                <strong>编号:{{item.id}}</strong>
                <strong>姓名:{{item.name}}</strong>
                <strong>年龄:{{item.age}}</strong>
                <button @click="delFn(index)">del</button>
                <button @click="updateFn(index)">update</button>
            </li>
        </ul>
    </div>
</body>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            /*Vue内部会为data中的每一个属性新增get set方法
            在set方法的内部实现了响应式相关的功能!*/
            list:[
                {id:0,name:"damu",age:18},
                {id:1,name:"高小乐",age:28},
                {id:2,name:"宁安妮",age:48},
                {id:3,name:"老付",age:19},
                {id:4,name:"陪悦",age:38}
            ]
        },
        methods:{
            delFn(index){
                //删除
                this.list.splice(index,1)
            },
            updateFn(index){
                //修改
               /* let id = this.list[index].id;
                this.list.splice(index,1,{id,name:"xxx",age:88})*/


                //https://cn.vuejs.org/v2/guide/reactivity.html
                let id = this.list[index].id;
                this.list[index] = {id,name:"xxx",age:88};
            }
        }
    })
</script>
</html>